<template>
  <div
    class="item"
    @click="getArticle(item)"
    v-for="item in list"
    :key="item.articleId"
  >
    <div class="title">{{ item.title }}</div>
    <div class="tag" v-if="item.tagList && item.tagList.length > 0">
      <van-tag
        v-for="tag in item.tagList"
        :key="tag.tagId"
        type="primary"
        plain
        size="medium"
        @click.stop="addTag(tag)"
        >{{ tag.tagName }}</van-tag
      >
    </div>
    <div class="ql-container ql-snow mt-10 mb-10">
      <div class="ql-editor">
        <div class="text" v-html="item.content"></div>
      </div>
    </div>
    <p class="time">{{ item.pushTime }}</p>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  name: "articleList",
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    let router = useRouter();
    const state = reactive({
      list: props.list,
    });
    // 获取文章详情
    const getArticle = (data) => {
      router.push({
        path: "/article",
        query: {
          articleId: data.articleId,
        },
      });
    };
    const addTag = (data) => Toast(data.tagName);
    return {
      ...toRefs(state),
      getArticle,
      addTag,
    };
  },
};
</script>

<style lang="less" scoped>
.item {
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 21px;
  color: #404040;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "STHeiti",
    "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.3;
  font-weight: 800;
  margin-top: 30px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  //   justify-content: center;
}
.tag {
  .van-tag + .van-tag {
    font-weight: normal;
    margin-left: 5px;
  }
}
/deep/.text {
  font-size: 13px;
  font-style: normal;
  color: #a3a3a3;
  overflow: hidden;
  /* 超出文本设置为... */
  text-overflow: ellipsis;
  /* 将div1转换为盒子模型 */
  display: -webkit-box;
  /* 设置div的文本为5行---------------显示行数改这里 */
  -webkit-line-clamp: 5;
  /* 从顶部向底部垂直布置子元素 */
  -webkit-box-orient: vertical;
  /*white-space: initial;*/
  margin-bottom: 5px;
  
  /deep/img {
    max-width: 40px;
    max-height: 40px;
  }
  /* table 样式 */
  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  table td,
  table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }
  table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }

  /* ul ol 样式 */
  ul,
  ol {
    margin: 10px 0 10px 20px;
  }
}
.time {
  font-family: "Lora", "Times New Roman", serif;
  color: #808080;
  font-size: 16px;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 30px;
}
</style>
